<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  <title>Demo</title>
  <style>
  #paper {
    width: 800px;
    height: 300px;
    border: solid 1px red;
  }
  #paper canvas {
    background-color: #fdd;
  }
  </style>
</head>
<body>
  <button id="startRecord">start record</button>
  <button id="stopRecord" disabled="disabled">stop record</button>
  <div id="message"></div>
  <div id="paper"></div>
  <img id="recordGif"/>
  <script src="https://s2.ssl.qhres.com/!87edaa34/animator-0.3.1.min.js"></script>
  <script src="/js/spritejs.js"></script>
  <script src="/js/gif.js"></script>
  <script>
  const birdsJsonUrl = 'https://s5.ssl.qhres.com/static/5f6911b7b91c88da.json'
  const birdsRes = 'https://p.ssl.qhimg.com/d/inn/c886d09f/birds.png'

  ;(async function(){
    const paper = spritejs.Paper2D('#paper', 
      {
        viewport: ['auto', 'auto'], 
        resolution: [800, 400], 
        stickMode: 'height',
        // stickExtend: true,
      })
    console.log(paper.distortion)
    const Sprite = spritejs.Sprite,
          Path = spritejs.Path,
          Label = spritejs.Label
    const layer = paper.layer('fglayer', {renderMode: 'repaintDirty'})
    
    await paper.preload(
      [birdsRes, birdsJsonUrl]   // 预加载资源，支持雪碧图
    )  

    const s = new Sprite({
      attributeChangedCallback(...args) {
        //console.log(args)
      }
    })

    s.attr({
      anchor: [0.5, 0.5],
      pos: [300, 100],
      //size: [50, 50],
      //bgcolor: 'green',
      //opacity: 0.5,
      transform: {
        //translate: [30, 30],
        //rotate: 30,
        scale: [0.5, 0.5],
      },
      offsetPath: 'M10,80 q100,120 120,20 q140,-50 160,0',
      //offsetDistance: 0.5,
      //offsetRotate: 30,
      zIndex: 200,
    })

    layer.appendChild(s)

    s.textures = ['bird1.png']

    s.animate([
      {offsetDistance: 0},
      {offsetDistance: 1}
    ], {
      duration: 3000,
      direction: 'alternate',
      iterations: Infinity,
    })

    s.animate([
      {scale: [.5, .5], offsetRotate: 'auto'},
      {scale: [.5, -.5], offsetRotate: 'reverse'},
      {scale: [.5, .5], offsetRotate: 'auto'},
    ], {
      duration: 6000,
      iterations: Infinity,
      easing: 'step-end',
    })

    s.animate([
      {textures: 'bird1.png'},
      {textures: 'bird2.png'},
      {textures: 'bird3.png'},
    ], {
      duration: 300,
      direction: 'alternate',
      iterations: Infinity,
    })

    window.s = s;
    //paper.removeChild(s);

    // console.log('box', s3.renderBox)

    // s.on('touchstart', e => {
    //   console.log('in origin box', e.offsetX, e.offsetY);
    //   e.stopDispatch()
    // })

    // layer.on('update', e => {
    //   console.log(e.currentTime)
    // })

    // s.on('update', e => {
    //   console.log('update')
    // })

    // const s1 = new Sprite({
    //   attributeChangedCallback(...args) {
    //     //console.log(args)
    //   }
    // })

    // s1.attr({
    //   anchor: [0.5, 0.5],
    //   pos: [100, 100],
    //   size: [50, 50],
    //   bgcolor: 'green',
    //   opacity: 0.5,
    //   transform: {
    //     translate: [30, 30],
    //     rotate: 45,
    //   },
    //   zIndex: 201,
    // })

    // layer.appendChild(s1)

    // s1.on('click', function(evt){
    //   console.log(evt)
    // })

    const s2 = new Sprite()

    s2.attr({
      anchor: [0.5, 0.5],
      pos: [100, 100],
      size: [50, 50],
      bgcolor: 'red',
      border: [5, 'blue'],
      opacity: 1,
      zIndex: 101,
      // transform: {
      //   //skew: [30, 0],
      //   translate: [30, 30],
      //   rotate: 45,
      // },
      transform: 'translate(30,30) rotate(45)',
      linearGradients: {
        bgcolor: {
          direction: 135,
          colors: [{
            offset: 0,
            color: 'red',
          }, {
            offset: 1,
            color: 'green',
          }]
        },
        border: {
          direction: 135,
          colors: [{
            offset: 0,
            color: '#37c',
          }, {
            offset: 1,
            color: '#c73',
          }]
        },
      },
    })

    window.s2 = s2

    const s3 = new Sprite()

    s3.attr({
      anchor: [0.5, 0.5],
      pos: [130, 130],
      size: [50, 50],
      bgcolor: 'red',
      border: [15, 'blue'],
      opacity: 0.5,
      zIndex: -500,
    })


    layer.append(s2, s3);

    window.s3 = s3

    s2.on('click', e => {
      console.log(111)
      e.stopDispatch()
    })
    s3.on('click', e => {
      console.log(222)
    })

    const s4 = new Path()

    s4.attr({
      anchor: [0, 0],
      pos: [300, 100],
      //size: [200, 200],
      bgcolor: '#ddd',
      color: 'red',
      //renderMode: 'fill',
      lineWidth: 6,
      lineCap: 'round',
      d: 'M10,80 q100,120 120,20 q140,-50 160,0',
      //d: 'M10 80 h260 v206 h-260Z',
      linearGradients: {
        strokeColor: {
          //direction: 45,
          //rect: [0, 0, 100, 100],
          vector: [10, 50, 290, 200],
          colors: [{
            offset: 0,
            color: 'rgba(255,0,0,0)',
          }, {
            offset: 1,
            color: 'rgba(255,0,0,0)',
          }]
        },
      }  
    })
    
    layer.append(s4)
    window.s4 = s4

    const a1 = new Animator(1000,  p => {
          const colors = [
            {offset: 0, color: 'rgba(255,0,0,0)'},
            {offset: p, color: 'rgba(255,0,0,1)'},
            {offset: p, color: 'rgba(255,0,0,0)'},
          ]

          const linearGradients = s4.attr('linearGradients')
          linearGradients.strokeColor.colors = colors
          s4.attr({linearGradients})
    })

    a1.animate()


    const label = new Label('Hello World!\n你好，世界！')
    
    label.attr({
      anchor: [0.5, 0.5],
      pos: [300, 150],
      zIndex: 1000,
      font: '36px Arial',
      border: [10, 'blue'],
      opacity: 0.3,
      linearGradients: {
        fillColor: {
          direction: 135,
          colors: [{
            offset: 0,
            color: 'red',
          }, {
            offset: 1,
            color: 'green',
          }]
        },
      }      
    })

    layer.append(label)

    label.animate([
      {rotate: 0},
      {rotate: 360}
    ], {
      duration: 10000,
      iterations: Infinity,
    })

    s.on('update', evt => {
      if(s.OBBCollision(label)){
        label.attr('opacity', 0.7)
      } else {
        label.attr('opacity', 0.3)
      }
    })

    let gif, timer
    startRecord.onclick = function(){
      startRecord.disabled = 'disabled'
      stopRecord.disabled = ''

      gif = new GIF({
        workers: 4,
        workerScript: '/js/gif.worker.js',
        quality: 10,
        background: '#fff',
      })

      gif.addFrame(layer.canvas, {delay: 1, copy: true})

      //gif.addFrame(layer.canvas, {delay: 1000, copy: true})
      //gif.addFrame(layer.canvas, {delay: 2000, copy: true})
      //gif.addFrame(layer.canvas, {delay: 3000, copy: true})

      //gif.addFrame(layer.canvas, {delay: 100})

      timer = setInterval(() => {
        gif.addFrame(layer.canvas, {delay: 1, copy: true})
      }, 100)

      gif.on('finished', function(blob) {
        const url = URL.createObjectURL(blob);
        startRecord.disabled = ''
        //recordGif.src = url

        const link = document.createElement('a')
        link.setAttribute('href', url);
        link.setAttribute('download', 'snap.gif');
        link.click()

        message.innerHTML = ''
        s3.attr('opacity', 0.5)
      });
      
      //console.log(gif.frames)
      
    }

    stopRecord.onclick = function(){
      stopRecord.disabled = 'disabled'
      s3.attr('opacity', 0)
      clearInterval(timer)
      layer.off('update')
      gif.render()
      message.innerHTML = 'generating gif... please wait.'
    }
  })()
  </script>
</body>
</html>